<template>
    <div class="common-layout">
        <el-container>
            <el-header></el-header>
            <el-main>
                <div style="margin: 0 auto;width: 900px">
                    <router-link to="/personal" style="text-decoration-line: none;">
                        <h5 style="margin-top: 0px">&lt; 返回</h5>
                    </router-link>
                </div>
                <div class="OrderShow" v-for="item1 in orders" :key="item1.id">
                    <h4 style="margin: 3px 0px 0px 60px">{{item1.store.name}}</h4>
                    <div v-for="item2 in item1.orderItems" :key="item2.id">
                        <el-row>
                            <el-col :span="3"></el-col>
                            <el-col :span="2">
                                <el-image :src="`http://127.0.0.1:8081/product/${item2.product.picture }`" style="width: 200px;height: 200px; margin-top: 20px"></el-image>
                            </el-col>
                            <el-col :span="5"></el-col>
                            <el-col :span="7">
                                <h3>名称：{{item2.product.title}}</h3>
                                <h5 style="margin-top: -10px">数量：{{item2.number}}</h5>
                                <h5 style="margin-top: -10px">实付款：{{item1.total}}</h5>
                                <el-row>
                                    <el-col :span="9">
                                        <span>假一赔十</span>
                                    </el-col>
                                    <el-col :span="15">
                                        <span>七天无理由退货</span>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>

                    <el-row style="margin-top: -74px">
                        <el-col :span="10"></el-col>
                        <el-col :span="5">
                            <h5>地址信息：{{item1.address.address}}</h5>
                            <h5>姓名：{{item1.address.name}}</h5>
                            <h5>联系方式：{{item1.address.telephone}}</h5>
                        </el-col>
                        <el-col :span="3"></el-col>
                    </el-row>
                    <el-button v-show="sh" @click="qrsh(item1.id)" style="margin-left: 460px">确认收货</el-button>
                    <el-button v-show="pj" @click="dkpj(item1.id)" style="margin-left: 460px">评价</el-button>
                    <el-button v-show="rem" @click="remove(item1.id)" style="margin-left: 460px">删除</el-button>
                </div>

                <el-dialog v-model="comment" title="评价" width="380px" style="text-align: center;">
                    <el-form :model="order">
                        <el-form v-for="(item, index) in order.orderItems" :key="item.id">
                            <el-form-item>
                                <el-image style="height: 100px;width: 100px;margin-left: 120px"
                                          :src="`http://127.0.0.1:8081/product/${item.product.picture}`"/>
                            </el-form-item>
                            <textarea v-model="textareas[index]"/>
                            <hr>
                        </el-form>
                        <el-button @click="finish(order)" style="margin-top: 30px">
                            完成评价
                        </el-button>
                    </el-form>
                </el-dialog>
            </el-main>

        </el-container>
    </div>
</template>

<style scoped>
.el-header {
    height: 60px;
    background-color: #545c64;
    position: relative;
}
.OrderShow{
    width: 900px;
    background-color: snow;
    margin: 0 auto;
    border-radius: 5%;
}
span{
    color: orange;
    font-size: 13px;
    border: 1px solid orange;
}
</style>
<script setup>
import {onMounted, ref, reactive, toRaw, computed} from 'vue'
import {ElMessageBox, ElTable} from 'element-plus'
import axios from 'axios'
import router from '../router/index.js'
import {ElMessage} from "element-plus";
import orderApi from '../api/order.js'
import commentApi from '../api/comment.js'
import {useRoute} from "vue-router";

const cs = ref(1)

onMounted(() =>{
    orderShows()
})
const show1 = ref(false)
const orders = ref([])
const route = useRoute();
let sta = parseInt(route.query.sta);
const orderForm = reactive({
    sta: sta
})
const orderForm1 = reactive({
    id: ''
})
const sh = ref(false)
const pj = ref(false)
const rem = ref(false)

const orderShows = async() =>{
    const res = await orderApi.queryByUidAndSta(orderForm)
    orders.value = res.data
    if(orderForm.sta === 2){
        sh.value = true
    }
    if (orderForm.sta === 3){
        pj.value = true
    }
    if (orderForm.sta === 4){
        rem.value = true
    }
}
// #######################################确认收货########################################
const qrsh = async(id) =>{
    orderForm1.id  = id
    const res = await orderApi.modifySta3(orderForm1)
    console.log(res.data)
    if(res.data){
        window.location.reload()
    }
}
// #######################################发布评价########################################
const comment = ref(false)
const order = ref([])
const createForm = reactive({
    pid:'',
    textarea:''
})
const textareas = ref([]);
const dkpj = async(id) =>{
    comment.value = true
    orderForm1.id = id
    console.log(orderForm1.id)
    const res = await orderApi.queryById(orderForm1)
    order.value = res.data
    console.log(order.value)
}

const finish = async(order1) =>{
    let i;
    for (i = 0;i < order1.orderItems.length;i++){
        createForm.pid = order1.orderItems[i].product.id
        createForm.textarea = textareas.value[i]
        const res = await commentApi.create(createForm)
        if (res.data){
            console.log(res.data)
        }
    }
    orderForm1.id = order1.id
    const res1 = await orderApi.modifySta4(orderForm1)
    if (res1.data){
        alert("完成评价")
        window.location.reload()
    }
}

// ######################################删除订单#########################################
const dOrderForm = reactive({
    id:''
})
const remove = async(id) =>{
    dOrderForm.id = id
    const res = orderApi.removeById(dOrderForm);
    if(res){
        console.log(res)
    }
}

</script>